<!-- picker选择器 -->
<link rel="stylesheet" href="/assets/home/plugins/mui/mui.picker.css" />
<link rel="stylesheet" href="/assets/home/plugins/mui/mui.poppicker.css" />
<link rel="stylesheet" href="/assets/home/css/confirm.css" />

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{:url('/home/index/collect')}?subject={$subject.id}"></a>
    <h1 class="mui-title">订单结算</h1>
</header>

<form method="post">
    <div class="course">
        <div class="left">
            <div class="thumb">
                <img src="{$subject.thumb_cdn}" alt="">
            </div>
        </div>
        <div class="right">
            <div class="name"></div>
            <div class="teacher">授课老师：{$teacher.name}</div>
            <div class="type">课程分类：{$category.name}</div>
        </div>
    </div>

    <div class="coupon-info">
        {if condition="empty($coupon.title)"}
        <div class="text">
            优惠券：
        </div>
        <a class="coupon" href="{:url('/home/business/coupon_list')}?subject={$subject.id}">请选择优惠券</a>
        <input type="hidden" name="coupon" value="" />
        {else /}
        <div class="text" style="color: red;">
            优惠券：{$coupon.rate * 10}<span>折</span>
        </div>
        <a class="coupon" href="{:url('/home/business/coupon_list')}?subject={$subject.id}">{$coupon.title}</a>
        <input type="hidden" name="coupon" value="{$coupon.id}" />
        {/if}
    </div>

    <div class="price-info">
        <div class="text">
            课程价格：
        </div>
        <div class="price">
            ￥{$subject.price}
        </div>
    </div>

    <div class="pay-info">
        <div class="text">
            支付方式：
        </div>
        <div class="pay" id="pay">余额支付</div>
        <input type="hidden" name="pay" value="money" />
    </div>

    <div class="footer">
        {if condition="empty($coupon.title)"}
        <div class="total">
            总价：<span id="total">￥{$subject.price}</span>
        </div>
        {else /}
        <div class="total">
            总价：<span id="total">￥{$subject.total}</span>
        </div>
        {/if}
        <button class="btn" id="list">提交</button>
    </div>
</form>

<script src="/assets/home/plugins/mui/mui.picker.js"></script>
<script src="/assets/home/plugins/mui/mui.poppicker.js"></script>
<script>
    $('#pay').click(function () {

        // 初始化弹出层
        let picker = new mui.PopPicker();

        // 设置数据
        picker.setData([
            { value: 'money', text: '余额支付' },
            { value: 'wx', text: '微信支付' },
            { value: 'zfb', text: '支付宝支付' }
        ]);

        // 显示弹窗
        picker.show(function (item) {
            $("#pay").html(item[0].text)
            $("input[name=pay]").val(item[0].value)
        });
    });

// $('.btn #list').click(async function(){
//     let result = await POST({
//         url:'subject/teacher/buy'
//     });

// })
</script>